import QtQuick 2.12
import QtQuick.Window 2.12


Window {
    id: id_root
    visible: true
    width: 1920
    height: 720
    color: "black"

    property int num: 140


    SequentialAnimation on num {
        loops: Animation.Infinite
        PropertyAnimation {
            from: 0
            to: 140
            duration: 2000
            easing.type: Easing.OutQuad
        }
        PauseAnimation { duration: 500 } // 暂停0.5秒
        PropertyAnimation {
            from: 140
            to: 0
            duration: 2000
            easing.type: Easing.OutQuad
        }
        PauseAnimation { duration: 500 } // 暂停0.5秒
    }

    Image {
        source: "qrc:/res/bg.png"
    }



    Item {
        width: 710
        height: 371
        x:0
        y:340
        ShaderEffect {
            anchors.fill: parent
            property real speeds: num/140.0
            property variant source: Image { source: "qrc:/res/water_l.png" }

            fragmentShader: "
                uniform sampler2D source;
                varying highp vec2 qt_TexCoord0;
                uniform highp float speeds;
                void main() {
                    highp vec2 uv = qt_TexCoord0;
                    highp vec4 color = texture2D(source, uv);
                    highp float a = smoothstep(0.0, speeds,uv.x);
                    //color.rgb *= 2.0;
                    color = mix(color,vec4(0.0,0.071, 0.161, 1.0),a);
                    gl_FragColor = color;
                }
            "
        }
    }

    Item{
        y : 257
        width: 846
        height: 98
        clip: true
        Image {//846
            x : num/140*820 - 820
            source: "qrc:/res/left.png"
        }
    }

    Image {
        x: -1
        source: "qrc:/res/bg_moutain.png"
    }

    property var list
    property string title
    property var focus
    property bool isListView: false

    onListChanged: {
        //console.log("list:" + list)
        id_model.clear()
        id_model.append(list)
    }

    onFocusChanged: {
        for (var i = 0; i < focus.length; ++i) {
            for (var j = 0; j < id_model.count; ++j) {
                var item = id_model.get(j)

                if(item.data === focus[i].data){
                    if(item.isFocus !== focus[i].isFocus){
                        item.isFocus = focus[i].isFocus
                    }
                    break
                }
            }
        }
    }

    onTitleChanged: {
        //console.log("title:" + title)
    }


    ListModel {
        id: id_model
    }

    Rectangle{
        anchors.centerIn: parent
        width: 400
        height: 600
        visible: isListView

        ListView {
            id : id_listview
            width: 400
            height: 600
            model: id_model
            delegate: id_delegate
        }
    }


    Component{
        id : id_delegate
        Text {
            height: 80
            text: model.data//typeof(data)!=="undefined"? data:""
            color: model.isFocus?"red":"black"//typeof(isFocus)!=="undefined"?"red":"white"
            font.pixelSize: 30
        }
    }

    Rectangle{
        anchors.centerIn: parent
        width: 400
        height: 600
        visible: !id_listview.visible

        Text {
            anchors.centerIn: parent
            text: title
            font.pixelSize: 30
            horizontalAlignment: Text.AlignHCenter
        }
    }
}
